<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="common/css_js.jsp"></jsp:include>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
</head>
<%-- 导入窗口插件 --%>
<script src="<%=path%>/static/jquery/jquery-3.6.0.min.js"></script>
<script src="<%=path%>/static/hui/lib/layer/2.4/layer.js"></script>
<script src="<%=path%>/static/js/common.js"></script>
<body>

<div class="container" style="margin-top: 10px">
    <div class="m-3">
        <form method="post" action="return false;">
            <div class="input-group mb-3 float-right">
                <a class="btn btn-success mr-3" id="add" href="javascript:" onclick="layer_show('添加员工','add',600,400)">添加</a>
                <input type="text" class="form-control" id="name" placeholder="请输入员工真实姓名查询数据"
                       aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="input-group-text" type="button" onclick="checkOne()">查询</button>
                </div>
            </div>
        </form>
    </div>
    <table class="table">
        <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>性别</td>
            <td>账号</td>
            <td>密码</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${pageData.list}" var="one">
            <tr>
                <td>${one.e_id}</td>
                <td>${one.e_name}</td>
                <td>${one.e_sex}</td>
                <td>${one.e_username}</td>
                <td>${one.e_password}</td>
                <td>
                    <button class="btn btn-info" type="button"
                            onclick="layer_show('修改员工信息','update?e_id=${one.e_id}',600,400)">修改
                    </button>
                    <button class="btn btn-danger" type="button" onclick="deleteEmployee(${one.e_id})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <div class="container">
        <div class="col-md-6 offset-md-3">
            <div class="center-align">
                <div id="page">
                    <button class="btn btn-secondary" onclick="firstPage()">首页</button>
                    <button class="btn btn-secondary" onclick="prevPage()">上一页</button>
                    <button class="btn btn-secondary" onclick="nextPage()">下一页</button>
                    <button class="btn btn-secondary" onclick="lastPage()">尾页</button>
                    <span>当前第${pageData.currentPage}页，共${pageData.totalPage}页，共${pageData.totalSize}条记录</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        var e_name = $("#name").val()
        var pageSize = ${pageData.pageSize};
        var pageNumber = ${pageData.currentPage};
        var totalPage = ${pageData.totalPage};

        function firstPage() {
            if (pageNumber != 1) {
                pageNumber = 1;
                gotoPage();
            }
        }

        function prevPage() {
            if (pageNumber > 1) {
                pageNumber--;
                gotoPage();
            }
        }

        function nextPage() {
            if (pageNumber < totalPage) {
                pageNumber++;
                gotoPage();
            }
        }

        function lastPage() {
            if (pageNumber != totalPage) {
                pageNumber = totalPage;
                gotoPage();
            }
        }

        function gotoPage() {
            window.location.href = "${pageContext.request.contextPath}/employee/queryAllEmployee?pageSize=" + pageSize + "&pageNumber=" + pageNumber + "&e_name=" + e_name;
        }
    </script>
    <script>
        function checkOne() {
            var name = $("#name").val();
            $.ajax({
                url: "queryAllEmployee?e_name=" + name,
                method: "post",
                async: true,
                dataType: "text",
                /*contentType:"application/x-www.-form-urlencoded",*/
                success: function () {
                    location.href = "queryAllEmployee?e_name=" + name
                }
            })
        }

        function deleteEmployee(e_id) {
            if (confirm("你确定要删除该员工吗?")) {
                $.ajax({
                    url: "deleteEmployee",
                    method: "post",
                    dataType: "text",
                    /*contentType:"application/x-www.-form-urlencoded",*/
                    data: {
                        e_id: e_id
                    },
                    success: function (result) {
                        if (result == "success") {
                            window.location.href = "queryAllEmployee";
                            alert("删除成功");
                        } else {
                            alert("删除失败");
                        }
                    }, error: function (e) {
                        alert("服务器错误");
                    }
                })
            }
        }
    </script>
</div>
</body>
</html>
